<template>
	<view>
		<view class="usable-hint" style="margin-top: 38rpx;">
			<text>接收用户</text>
		</view>
		<u-form class="form-box" :model="form" ref="uForm" label-width="156">
			<u-form-item class="usable-input" border-bottom="false">
				<u-input v-model="form.phone" 
				style="border-bottom: none !important;"
				placeholder="请输入手机号" :clearable="false" @blur="getMobilemapname" />
			</u-form-item>
			<u-form-item class="usable-input" style="margin-top: 19rpx;border-bottom: none;" label="" border-bottom="false">
				<u-input disabled v-model="form.name" 
				style="border-bottom: none !important;"
				placeholder="请输入真实姓名" />
			</u-form-item>
		</u-form>
	</view>
</template>

<script>
	import {
		mobilemapname
	} from "@/api/personal-center.js"
	export default {
		name: "mobilemapname",
		data() {
			return {
				form: {
					phone: '',
					name: '',
					user_obj_id: '',
					borderBottom:false
				}
			};
		},
		created() {
			// this.getMobilemapname()
		},
		methods: {
			getMobilemapname() {
				if (!this.form.phone) {
					this.$mUtil.toast("请输入手机号")
					return false
				}
				if (!(this.form.phone.match(this.$mConfig.telRegex))) {
					this.$mUtil.toast("请输入正确的手机号")
					return false
				}
				// return false
				this.$http.post(`${mobilemapname}/${this.form.phone}`).then(res => {
					this.form.name = res.data.accept_real_name
					this.form.user_obj_id = res.data.user_obj_id
				})
			},
			// 获取需要转赠对象的ID
			getObjUserId() {
				return new Promise((resolve, reject) => {
					if (this.form.user_obj_id) {
						resolve(this.form)
					} else {
						this.$mUtil.toast("请先确认接收用户");
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.receive-user {
		margin-top: 84rpx;
	}

	.usable-hint {
		font-weight: bold !important;
		font-size: 31rpx;
		color: #333333;
		line-height: 31rpx;

		.service-charge {
			font-weight: 400;
		}
	}

	.form-box {
		width: 635rpx !important;
		height: auto !important;
		background: #fff !important;
		border-radius: 19rpx 19rpx 19rpx 19rpx !important;
		border: none !important;

		display: flex !important;
		flex-direction: column !important;
		margin-top: 19rpx;
	}
	/deep/.usable-input{
		padding-left: 19rpx !important;
		border: none !important;
		background: #F9F9F9 !important;
		border-radius: 19rpx ;
		width: 635rpx;
		height: 96rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		
	}
	/* 这里使用了 /deep/ 选择器来穿透组件边界，确保能选中组件内的样式 */
	.form-box /deep/ .u-border {
	  border: none !important; /* 去掉边框 */
	  box-shadow: none !important; /* 去掉阴影 */
	}
	/deep/.u-border-bottom{
		 border: none !important; /* 去掉边框 */
		 border-bottom: 1rpx solid #fff !important;
	}
	.u-border-bottom {
		border:none !important;
	}
	
		/deep/.uni-input-input {
			font-weight: bold !important;
			font-size: 31rpx;
			color: #333333;
			line-height: 31rpx;
		}
		/deep/.u-border-bottom{
			border-bottom: none !important;
		}
		/deep/.u-border-bottom:after{
			border-bottom: none !important;
		}
		
	
</style>